<template>
  <div class="app-container">
    <div class="clearfix margin-b">
      <el-button class="fl" type='primary' @click='linkToAddPublic'>添加公众号</el-button>
      <div class="fr">
        <el-input @keyup.enter.native="toSearch" v-model='listQuery.searchName' clearable placeholder='按公众号名称或老师姓名进行搜索' style='width: 250px;'></el-input>
        <el-button class="search" type='success' icon='el-icon-search' @click="toSearch">搜索</el-button>
      </div>
    </div>
    <el-table :data='publiceListData' row-key='id' fit highlight-current-row
              :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
              class="table c-width100 color-222 family-PingFangSC-Regular font-s12" v-loading="this.listLoading">
      <el-table-column align='center' label='公司名称' width='180'>
        <template slot-scope='scope'>
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='老师姓名'>
        <template slot-scope='scope'>
          <span>{{scope.row.lecturerName}}</span>
        </template>
      </el-table-column>
      <el-table-column width='65' align='center' label='代理版'>
        <template slot-scope='scope'>
          <span v-if="scope.row.agentLevels  > 0" style="color:#409EFF;">✔</span>
          <span v-else style="color:red;">✘</span>
        </template>
      </el-table-column>
      <el-table-column width='150' align='center' label='所属服务器'>
        <template slot-scope='scope'>
          <span>{{scope.row.host}}</span>
        </template>
      </el-table-column>
      <el-table-column width='100' align='center' label='实际用户'>
        <template slot-scope='scope'>
          <span>{{scope.row.allUser}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column width='65' align='center' label='VIP数'>
        <template slot-scope='scope'>
          <span>{{scope.row.allVip}}</span>
        </template>
      </el-table-column>
      <el-table-column width='65' align='center' label='svip数'>
        <template slot-scope='scope'>
          <span>{{scope.row.allSvip}}</span>
        </template>
      </el-table-column> -->
      <el-table-column width='75' align='center' label='公众号是否已授权'>
        <template slot-scope='scope'>
           <span v-if="scope.row.isAuth  ==1" style="color:#409EFF;">✔</span>
          <span v-else style="color:red;">✘</span>
        </template>
      </el-table-column>
      <el-table-column width='75' align='center' label='是否开通小程序'>
        <template slot-scope='scope'>
         <span v-if="scope.row.enableWxapp  ==1" style="color:#409EFF;">✔</span>
          <span v-else style="color:red;">✘</span>
        </template>
      </el-table-column>

      <!-- <el-table-column width='80' align='center' label='短信余额'>
        <template slot-scope='scope'>
          <span>{{scope.row.smsBlance}}</span>
        </template>
      </el-table-column> -->
      <el-table-column width='100' align='center' label='创建日期'>
        <template slot-scope='scope' v-if="scope.row.createdAt != '' && scope.row.createdAt != null">
          <span>{{scope.row.createdAt.split(" ")[0]}}</span>
          <div>{{scope.row.createdAt.split(" ")[1]}}</div>
        </template>
      </el-table-column>
      <el-table-column align='center' label='操作'>
        <template slot-scope='scope'>
          <div>
            <b @click="linkToEdit(scope.row.companyId)">编辑</b>
            <span class="color-409">|</span>
            <b @click="lookMessage(scope.row.companyId)">短信余额</b>
            <div><b @click="enterCheckPass(scope.row.companyId, scope.row.mpName)">进入客户系统</b></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    	<div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30, 40, 50]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
    <el-dialog
      title="输入操作密码，并确认"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input type="password" @keyup.enter.native="makeSure" v-model="optionPassword"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="makeSure">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import { toGetWeChatPublicList, toMakeSure, toSearchSms } from '@/api/wechatPublic'
import { setLoginType, setCompanyName } from '@/utils/auth'
export default {
  data() {
    return {
      dialogVisible: false,
      listQuery: {
        searchName: null,
        total: null,
        limit: 10
      },
      listLoading: false,
      publiceListData: [],
      optionPassword: null,
      enterCompanyId: 0,
      enterName: null

    }
  },
  mounted() {

  },
  created() {
    this.getWechatPublicList()
  },
  methods: {
    getWechatPublicList() {
      this.listLoading = true
      toGetWeChatPublicList(this.listQuery).then(res => {
        this.publiceListData = res.data.data.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getWechatPublicList()
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getWechatPublicList()
    },
    linkToAddPublic() {
      this.$router.push({ name: 'addPublic' })
    },
    toSearch() {
      this.listQuery.page = 1
      this.getWechatPublicList()
    },
    linkToEdit(id) {
      this.$router.push({ path: `/publicLists/editPublic/${id}` })
    },
    linkToCusterSystem() {

    },
    linkToXcx() {

    },
    enterCheckPass(companyId, companyName) {
      this.enterCompanyId = companyId
      this.enterName = companyName
      this.dialogVisible = true
    },
    enterSubSystem(companyId, companyName) {
      this.$store.dispatch('LoginProxy', companyId).then(res => {
        setLoginType(0)
        setCompanyName(companyName)
        document.location.href = '/dashboard'
      }).catch(err => {
        console.log(err)
      })
    },
    makeSure() {
      var data = { 'optionPassword': this.optionPassword }
      toMakeSure(data).then(res => {
        if (res.data.data.status) {
          this.enterSubSystem(this.enterCompanyId, this.enterName)
          this.dialogVisible = false
        } else {
          this.$message.error('操作密码错误，请重试!')
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    lookMessage(companyId) {
      const h = this.$createElement
      toSearchSms(companyId).then(res => {
        this.$msgbox({
          title: '短信余额',
          message: h('p', null, res.data.data),
          showCancelButton: false,
          confirmButtonText: '确定',
          center: true
        }).then(action => {

        })
      })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style scoped>

</style>
